<script setup>
import useCityStore from '@/stores/modules/city'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { formatDate, diffDate } from '@/utils/formatdate'
import useHomeStore from '@/stores/modules/home'
import useMainStore from '@/stores/modules/main'

// 切换城市
const router = useRouter()
const handleCityClick = () => {
  router.push('/city')
}
// 城市位置回显
const cityStore = useCityStore()
const { currentCity } = storeToRefs(cityStore)

// 时间处理
const mainStore = useMainStore()
const { startDateM, endDateM } = storeToRefs(mainStore)

const startDate = computed(() => {
  return formatDate(startDateM.value)
})

const endDate = computed(() => {
  return formatDate(endDateM.value)
})
const stayDate = ref(diffDate(endDateM.value, startDateM.value)) //停留时间

// 日历
const showCalendar = ref(false) //日历组件显示
const formatter = (day) => {
  // 选中文字修改
  if (day.type === 'start') {
    day.bottomInfo = '入住'
  } else if (day.type === 'end') {
    day.bottomInfo = '离店'
  }

  return day
}
// 选中日期时间
const onConfirm = (value) => {
  //选中的时间
  const selectStartDate = value[0]
  const selectEndtDate = value[1]

  mainStore.startDateM = selectStartDate
  mainStore.endDateM = selectEndtDate

  stayDate.value = diffDate(selectEndtDate, selectStartDate)

  showCalendar.value = !showCalendar.value
}

// 热词
const homeStore = useHomeStore()
const { hotSuggests } = storeToRefs(homeStore)

// 搜索功能按钮
const handleSearchClick = () => {
  router.push({
    path: '/search',
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      currentCity: currentCity.value.cityName,
    },
  })
}
</script>

<template>
  <div class="home-search-box">
    <!-- 定位 -->
    <div class="location bottom-gray-line">
      <div class="city" @click="handleCityClick">{{ currentCity.cityName }}</div>
      <div class="my-location">
        <div class="my-location-text">我的位置</div>
        <img src="@/assets/img/home/icon_location.png" alt="" />
      </div>
    </div>
    <!-- 日期 -->
    <div class="date flex bottom-gray-line" @click="showCalendar = true">
      <div class="start-date">
        <span class="tip">入住</span>
        <span class="time">{{ startDate }}</span>
      </div>
      <div class="stay-date">共{{ stayDate }}晚</div>
      <div class="end-date">
        <span class="tip">离店</span>
        <span class="time">{{ endDate }}</span>
      </div>
    </div>
    <!-- 日历 -->
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      color="#FF9854"
      :round="false"
      :formatter="formatter"
      :show-confirm="false"
      @confirm="onConfirm"
    />
    <!-- 人数及价格声明 -->
    <div class="statement flex bottom-gray-line">
      <div class="price">价格不限</div>
      <div class="people">人数不限</div>
    </div>
    <!-- 关键字 -->
    <div class="keyword flex bottom-gray-line">关键字/位置/民宿名</div>
    <!-- 热词 -->
    <div class="hot-suggests flex">
      <template v-for="(item, index) in hotSuggests" :key="item">
        <span class="item">{{ item.tagText.text }}</span>
      </template>
    </div>
    <!-- 搜索按钮 -->
    <div class="search-btn flex">
      <van-button type="primary" round color="#fba535" block @click="handleSearchClick"
        >开始搜索</van-button
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.home-search-box {
  --van-calendar-popup-height:height: 100%;

}
.location {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #333;
  height: 45px;
  .city {
    flex: 1;
  }
  .my-location {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 74px;
    font-size: 12px;
    color: #666;

    img {
      position: relative;
      top: -2px;
      width: 18px;
      height: 18px;
    }
  }
}
.date {
  .start-date,
  .end-date {
    display: flex;
    flex-direction: column;
    .tip {
      font-size: 12px;
      color: #999;
    }
  }
  .stay-date {
    text-align: center;
    font-size: 12px;
    color: #666;
  }
  .end-date{
    margin-right: 10px;
  }
}
.statement{
  color: #999;
  font-size: 14px;
  .people{
    margin-right: 18px;
  }
}
.keyword{
  font-size: 14px;
  color: #999;
}
.hot-suggests{
  margin-bottom: 10px;
  height: 84px;
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .item{
    padding: 4px 8px;
    margin: 4px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1;
    background-color: #f1f3f5;
  }
}
.search-btn{
  .van-button{
    height: 38px;
    font-size: 18px;
  }
}
</style>
